<template>
  <up-popup v-model:show="localShow" :round="10" :mode="props.mode" :closeable="props.closeable" @close="close"
    :customStyle="{ width: props.mode == 'center' ? props.width : '100%', backgroundColor: '#f2f5f9', height: props.height }"
    :closeOnClickOverlay="props.closeOnClickOverlay" :safeAreaInsetBottom="safeAreaInsetBottom">
    <view class="popup-text">{{ title }}</view>
    <view class="popup-content" :style="{ height: props.mode == 'center' ? 'calc(100% - 46px)' : props.height }">
      <slot></slot>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  popupShow: {
    required: true,
    type: Boolean,
    default: false,
  },
  safeAreaInsetBottom: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '提示',
  },
  height: {
    type: String,
  },
  mode: {
    type: String,
    default: "center"
  },
  width: {
    type: String,
    default: "100%"
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  closeable: {
    type: Boolean,
    default: true
  }
})
const localShow = ref(props.popupShow)
watch(() => props.popupShow, (newVal) => {
  localShow.value = newVal;
});

const emit = defineEmits(['close']);
function close() {
  emit('close')
}
</script>

<style lang="scss" scoped>
.popup-text {
  padding-left: 10px;
  display: flex;
  align-items: center;
  background-color: #fff;
  font-weight: 700;
  font-size: 18px;
  height: 46px;
  color: #0081ff;
  box-sizing: border-box;
  border-bottom: 2px solid #e9e9e9;
}

</style>